<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue';
import { ElLoading, ElMessage } from 'element-plus';
import { TravelNoteApi } from '@/api/new/travelNoteApi.js';
import { useRouter } from 'vue-router';
import { Search, Star, MessageBox, Calendar, LocationFilled, Flag } from '@element-plus/icons-vue';
import ArticleDetail from '@/components/ArticleDetail.vue';
import { UserProfileApi } from '@/api/new/userProfleApi.js';

// 路由
const router = useRouter();

// 搜索关键词
const searchKeyword = ref('');

// 游记列表
const travelNotes = ref([]);

// 热门游记
const hotTravelNotes = ref([]);

// 推荐游记
const recommendedTravelNotes = ref([]);

// 加载状态
const loading = ref(false);

// 文章详情模态窗口状态
const showArticleDetail = ref(false);
const currentArticleId = ref(null);

// 排序方式
const sortOption = ref('latest');

// 搜索页跳转
const handleSearch = () => {
  console.log('搜索触发')
  if (searchKeyword.value.trim()) {
    router.push({
      path: '/search',
      query: { keyword: searchKeyword.value }
    });
  }
};

// 分类标签
const tags = reactive([
  { name: '全部', active: true },
  { name: '山水', active: false },
  { name: '城市', active: false },
  { name: '美食', active: false },
  { name: '人文', active: false },
  { name: '自驾', active: false },
  { name: '户外', active: false },
]);

// 布局模式
const viewMode = ref('grid'); // 'grid' 或 'list'

// 添加默认头像常量
const defaultAvatar = 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png';

// 获取游记列表
const fetchTravelNotes = async () => {
  loading.value = true;
  try {
    // 使用 searchTravelNotes API 获取游记列表
    const response = await TravelNoteApi.searchTravelNotes('', 1, 50); // 空关键词获取所有游记，一次获取50条
    console.log('获取到的游记数据:', response);

    // 处理游记数据
    const processedNotes = await Promise.all(response.map(async (note) => {
      try {
        // 获取游记首图
        const imageData = await TravelNoteApi.getFirstImage(note.articleID);
        let imageUrl = null;
        
        // 处理图片URL
        if (imageData) {
          if (typeof imageData === 'string') {
            try {
              const parsedImage = JSON.parse(imageData);
              imageUrl = parsedImage.imageUrl;
            } catch (e) {
              imageUrl = imageData;
            }
          } else if (imageData.imageUrl) {
            imageUrl = imageData.imageUrl;
          }
        }
        
        // 获取作者信息
        let authorName = note.authorName || '未知用户';
        let authorAvatar = defaultAvatar;
        
        try {
          const authorData = await UserProfileApi.getUserInfo(note.authorID);
          if (authorData) {
            authorName = authorData.username || authorName;
            authorAvatar = authorData.headshot || authorAvatar;
          }
        } catch (error) {
          console.error(`获取作者信息失败: ${error}`);
        }
        
        // 返回处理后的游记对象
        return {
          ...note,
          imageUrl: imageUrl || 'https://img.freepik.com/free-photo/beautiful-shot-mountains-trees-covered-fog_181624-24902.jpg',
          formattedDate: new Date(note.creationTime).toLocaleDateString(),
          authorName: authorName,
          authorAvatar: authorAvatar,
          favoriteCount: note.favoriteCount || 0,
          views: Math.floor(Math.random() * 1000) + 100, // 模拟数据，实际应从API获取
          comments: Math.floor(Math.random() * 50) + 5, // 模拟数据，实际应从API获取
        };
      } catch (error) {
        console.error(`处理游记 ${note.articleID} 失败:`, error);
        return {
          ...note,
          imageUrl: 'https://img.freepik.com/free-photo/beautiful-shot-mountains-trees-covered-fog_181624-24902.jpg',
          formattedDate: new Date(note.creationTime).toLocaleDateString(),
          authorName: note.authorName || '未知用户',
          authorAvatar: defaultAvatar,
          favoriteCount: 0,
          views: Math.floor(Math.random() * 1000) + 100,
          comments: Math.floor(Math.random() * 50) + 5,
        };
      }
    }));

    // 按照创建时间排序 - 最新的在前面
    const sortedNotes = processedNotes.sort((a, b) => new Date(b.creationTime) - new Date(a.creationTime));

    travelNotes.value = sortedNotes;

    // 设置热门游记 (按收藏数排序)
    hotTravelNotes.value = [...sortedNotes].sort((a, b) => b.favoriteCount - a.favoriteCount).slice(0, 5);

    // 设置推荐游记 (随机挑选)
    const shuffled = [...sortedNotes].sort(() => 0.5 - Math.random());
    recommendedTravelNotes.value = shuffled.slice(0, 3);

  } catch (error) {
    console.error('获取游记列表失败:', error);
    ElMessage.error('获取游记列表失败，请稍后重试');
  } finally {
    loading.value = false;
  }
};

// 搜索游记
const searchTravelNotes = async () => {
  loading.value = true;
  try {
    if (!searchKeyword.value.trim()) {
      await fetchTravelNotes();
      return;
    }

    // 使用关键词搜索游记
    const response = await TravelNoteApi.searchTravelNotes(searchKeyword.value, 1, 50);
    
    // 处理游记数据（与fetchTravelNotes中相同的处理逻辑）
    const processedNotes = await Promise.all(response.map(async (note) => {
      try {
        // 获取游记首图
        const imageData = await TravelNoteApi.getFirstImage(note.articleID);
        let imageUrl = null;
        
        // 处理图片URL
        if (imageData) {
          if (typeof imageData === 'string') {
            try {
              const parsedImage = JSON.parse(imageData);
              imageUrl = parsedImage.imageUrl;
            } catch (e) {
              imageUrl = imageData;
            }
          } else if (imageData.imageUrl) {
            imageUrl = imageData.imageUrl;
          }
        }
        
        // 获取作者信息
        let authorName = note.authorName || '未知用户';
        let authorAvatar = defaultAvatar;
        
        try {
          const authorData = await UserProfileApi.getUserInfo(note.authorID);
          if (authorData) {
            authorName = authorData.username || authorName;
            authorAvatar = authorData.headshot || authorAvatar;
          }
        } catch (error) {
          console.error(`获取作者信息失败: ${error}`);
        }
        
        // 返回处理后的游记对象
        return {
          ...note,
          imageUrl: imageUrl || 'https://img.freepik.com/free-photo/beautiful-shot-mountains-trees-covered-fog_181624-24902.jpg',
          formattedDate: new Date(note.creationTime).toLocaleDateString(),
          authorName: authorName,
          authorAvatar: authorAvatar,
          favoriteCount: note.favoriteCount || 0,
          views: Math.floor(Math.random() * 1000) + 100,
          comments: Math.floor(Math.random() * 50) + 5,
        };
      } catch (error) {
        console.error(`处理游记 ${note.articleID} 失败:`, error);
        return {
          ...note,
          imageUrl: 'https://img.freepik.com/free-photo/beautiful-shot-mountains-trees-covered-fog_181624-24902.jpg',
          formattedDate: new Date(note.creationTime).toLocaleDateString(),
          authorName: note.authorName || '未知用户',
          authorAvatar: defaultAvatar,
          favoriteCount: 0,
          views: Math.floor(Math.random() * 1000) + 100,
          comments: Math.floor(Math.random() * 50) + 5,
        };
      }
    }));

    travelNotes.value = processedNotes;
    
  } catch (error) {
    console.error('搜索游记失败:', error);
    ElMessage.error('搜索游记失败，请稍后重试');
  } finally {
    loading.value = false;
  }
};

// 切换标签
const toggleTag = (selectedTag) => {
  tags.forEach(tag => {
    tag.active = tag.name === selectedTag.name;
  });

  // 按标签过滤游记
  if (selectedTag.name === '全部') {
    fetchTravelNotes();
  } else {
    // 这里应该调用实际的按标签过滤API
    // 暂时使用模拟数据
    const filteredNotes = travelNotes.value.filter((_, index) => index % 3 === 0);
    travelNotes.value = filteredNotes;
  }
};

// 排序游记
const sortTravelNotes = (option) => {
  sortOption.value = option;

  let sorted = [];
  switch (option) {
    case 'latest':
      sorted = [...travelNotes.value].sort((a, b) => new Date(b.creationTime) - new Date(a.creationTime));
      break;
    case 'popular':
      sorted = [...travelNotes.value].sort((a, b) => b.favoriteCount - a.favoriteCount);
      break;
    case 'views':
      sorted = [...travelNotes.value].sort((a, b) => b.views - a.views);
      break;
  }

  travelNotes.value = sorted;
};

// 打开文章详情
const openArticleDetail = (articleId) => {
  currentArticleId.value = articleId;
  showArticleDetail.value = true;
  // 禁止背景滚动
  document.body.style.overflow = 'hidden';
};

// 关闭文章详情
const closeArticleDetail = () => {
  showArticleDetail.value = false;
  // 恢复背景滚动
  document.body.style.overflow = '';
};

// 生成随机风景图片 URL
const getRandomLandscapeImage = () => {
  const imageIds = [
    '4652275', '1366872', '1450082', '2662792',
    '572897', '3608263', '2325446', '2901209'
  ];
  const randomId = imageIds[Math.floor(Math.random() * imageIds.length)];
  return `https://images.pexels.com/photos/${randomId}/pexels-photo-${randomId}.jpeg?auto=compress&cs=tinysrgb&w=800`;
};

// 切换视图模式
const toggleViewMode = (mode) => {
  viewMode.value = mode;
};

// 生命周期钩子
onMounted(() => {
  fetchTravelNotes();
});
</script>

<template>
  <div class="travel-notes-container">
    <!-- 顶部英雄区 -->
    <section class="hero-section">
      <div class="hero-overlay"></div>
      <div class="hero-content">
        <h1 class="hero-title">探索世界，记录旅途</h1>
        <p class="hero-subtitle">发现来自全球旅行者的精彩故事与美景</p>

        <div class="search-container">
          <el-input
            v-model="searchKeyword"
            placeholder="搜索目的地、景点或游记主题..."
            class="search-input"
            @keyup.enter="handleSearch"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
        </div>
      </div>
    </section>

    <!-- 精选推荐区域 -->
    <section class="featured-section">
      <h2 class="section-title">精选游记 <span class="subtitle">Editor's Pick</span></h2>

      <div class="featured-grid">
        <div class="featured-main" v-if="recommendedTravelNotes.length > 0" @click="openArticleDetail(recommendedTravelNotes[0].articleID)">
          <img :src="recommendedTravelNotes[0]?.imageUrl || getRandomLandscapeImage()" alt="精选游记" class="featured-image">
          <div class="featured-content">
<!--            <div class="location-tag">{{ recommendedTravelNotes[0]?.location || '未知位置' }}</div>-->
            <h3 class="featured-title">{{ recommendedTravelNotes[0]?.title || '精彩游记' }}</h3>
            <p class="featured-excerpt">{{ recommendedTravelNotes[0]?.content?.substring(0, 100) + '...' || '探索这个令人惊叹的地方，感受不一样的文化与风景...' }}</p>
            <div class="featured-meta">
              <span class="author">{{ recommendedTravelNotes[0]?.authorName || '旅行者' }}</span>
              <span class="date">{{ recommendedTravelNotes[0]?.formattedDate || '2023-10-15' }}</span>
            </div>
          </div>
        </div>
        <div class="featured-side">
          <div class="featured-item" v-for="(note, index) in recommendedTravelNotes.slice(1, 3)" :key="index" @click="openArticleDetail(note.articleID)">
            <img :src="note?.imageUrl || getRandomLandscapeImage()" alt="推荐游记" class="side-image">
            <div class="side-content">
<!--              <div class="location-tag small">{{ note?.location || '未知位置' }}</div>-->
              <h4 class="side-title">{{ note?.title || '精彩游记' }}</h4>
              <div class="side-meta">
                <span class="author">{{ note?.authorName || '旅行者' }}</span>
                <span class="date">{{ note?.formattedDate || '2023-10-15' }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 主游记列表区域 -->
    <section class="main-content">
      <div class="filter-container">
        <h2 class="section-title">最近更新</h2>
      </div>

      <!-- 游记宫格视图 -->
      <div v-if="viewMode === 'grid'" class="travel-notes-grid">
        <div
          v-for="note in travelNotes"
          :key="note.articleID"
          class="travel-note-card"
          @click="openArticleDetail(note.articleID)"
        >
          <div class="card-image-container">
            <img :src="note.imageUrl" :alt="note.title" class="card-image">
<!--            <div class="location-tag">{{ note.location || '未知位置' }}</div>-->
          </div>
          <div class="card-content">
            <h3 class="card-title">{{ note.title }}</h3>
            <p class="card-excerpt">{{ note.content.substring(0, 80) + '...' }}</p>
            <div class="card-meta">
              <div class="author-date">
                <span class="author">{{ note.authorName }}</span>
                <span class="date">{{ note.formattedDate }}</span>
              </div>
              <div class="stats">
                <span class="stat-item">
                  <i class="el-icon"><Star /></i>
                  <span>{{ note.favoriteCount || 0 }}</span>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 游记列表视图 -->
      <div v-else class="travel-notes-list">
        <div
          v-for="note in travelNotes"
          :key="note.articleID"
          class="travel-note-list-item"
          @click="openArticleDetail(note.articleID)"
        >
          <div class="list-image-container">
            <img :src="note.imageUrl" :alt="note.title" class="list-image">
          </div>
          <div class="list-content">
            <div class="list-header">
              <h3 class="list-title">{{ note.title }}</h3>
<!--              <div class="location-tag">{{ note.location || '未知位置' }}</div>-->
            </div>
            <p class="list-excerpt">{{ note.content.substring(0, 150) + '...' }}</p>
            <div class="list-meta">
              <div class="author-info">
                <span class="author">{{ note.authorName }}</span>
                <span class="date"><el-icon><Calendar /></el-icon> {{ note.formattedDate }}</span>
              </div>
              <div class="list-stats">
                <div class="stats">
                  <span class="stat-item">
                    <i class="el-icon"><Star /></i>
                    <span>{{ note.favoriteCount || 0 }}</span>
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 加载更多按钮 -->
      <div class="load-more-container">
        <el-button class="load-more-btn" :loading="loading">加载更多精彩游记</el-button>
      </div>
    </section>

    <!-- 侧边栏 - 热门游记 -->
    <aside class="sidebar">
      <div class="hot-travel-notes">
        <h3 class="sidebar-title">热门游记 <span class="subtitle">Popular Travels</span></h3>
        <div class="hot-notes-list">
          <div
            v-for="(note, index) in hotTravelNotes"
            :key="note.articleID"
            class="hot-note-item"
            @click="openArticleDetail(note.articleID)"
          >
            <div class="hot-note-rank">{{ index + 1 }}</div>
            <div class="hot-note-content">
              <h4 class="hot-note-title">{{ note.title }}</h4>
              <div class="hot-note-meta">
                <span class="hot-note-author">{{ note.authorName }}</span>
                <div class="hot-note-stats">
                  <span class="hot-stat">
                    <i class="el-icon"><Star /></i>
                    <span>{{ note.favoriteCount || 0 }}</span>
                  </span>
                </div>
              </div>
            </div>
            <div class="hot-note-image">
              <img :src="note.imageUrl" :alt="note.title">
            </div>
          </div>
        </div>
      </div>

      <!-- 旅行灵感区 -->
      <div class="travel-inspiration">
        <h3 class="sidebar-title">旅行灵感 <span class="subtitle">Travel Inspiration</span></h3>
        <div class="inspiration-card">
          <img src="https://images.pexels.com/photos/4652275/pexels-photo-4652275.jpeg?auto=compress&cs=tinysrgb&w=800" alt="旅行灵感" class="inspiration-image">
          <div class="inspiration-content">
            <h4 class="inspiration-title">探索秋日最美的徒步路线</h4>
            <p class="inspiration-text">秋高气爽，正是户外徒步的绝佳时节。无论是观赏红叶、漫步山间小道还是探索古道遗迹，这个季节都给旅行者带来别样的体验。</p>
            <el-button type="primary" class="inspiration-btn"><el-icon><Flag /></el-icon> 查看路线</el-button>
          </div>
        </div>
      </div>
    </aside>

    <!-- 文章详情模态窗口 -->
    <div v-if="showArticleDetail" class="article-modal-overlay" @click.self="closeArticleDetail">
      <div class="article-modal">
        <ArticleDetail
          :article-id="currentArticleId"
          @close="closeArticleDetail"
        />
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
// 主题颜色变量
@primary-color: #3498db;
@secondary-color: #2ecc71;
@accent-color: #e67e22;
@text-color: #333;
@light-gray: #f9f9f9;
@border-color: #eee;
@shadow: 0 4px 12px rgba(0,0,0,0.08);
@transition: all 0.3s ease;

// 容器样式
.travel-notes-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 300px;
  grid-template-areas:
    "hero hero"
    "featured featured"
    "main sidebar";
  gap: 30px;
}

// 英雄区域样式
.hero-section {
  grid-area: hero;
  height: 500px;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
  margin-bottom: 30px;
  background-image: url('https://images.pexels.com/photos/4652275/pexels-photo-4652275.jpeg?auto=compress&cs=tinysrgb&w=1400');
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: @shadow;

  .hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.7) 100%);
  }

  .hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 20px;
    max-width: 800px;

    .hero-title {
      font-size: 3.5rem;
      font-weight: 800;
      color: white;
      margin-bottom: 10px;
      text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    }

    .hero-subtitle {
      font-size: 1.2rem;
      color: rgba(255,255,255,0.9);
      margin-bottom: 30px;
      text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    }

    .search-container {
      display: flex;
      width: 100%;
      max-width: 600px;
      margin: 0 auto;

      .search-input {
        flex: 1;

        :deep(.el-input__wrapper) {
          padding-left: 15px;
          height: 50px;
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
          box-shadow: 0 3px 10px rgba(0,0,0,0.1);
        }
      }

      .el-button {
        height: 50px;
        font-size: 16px;
        font-weight: 600;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        padding: 0 25px;
      }
    }
  }
}

// 精选区域样式
.featured-section {
  grid-area: featured;
  margin-bottom: 30px;

  .section-title {
    font-size: 1.8rem;
    margin-bottom: 20px;
    display: flex;
    align-items: center;

    .subtitle {
      font-size: 1rem;
      font-weight: normal;
      color: #888;
      margin-left: 10px;
    }

    &::after {
      content: '';
      flex: 1;
      height: 1px;
      background: @border-color;
      margin-left: 15px;
    }
  }

  .featured-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    height: 450px;
  }

  .featured-main {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: @shadow;
    cursor: pointer;
    transition: @transition;
    height: 100%;

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 8px 25px rgba(0,0,0,0.15);

      .featured-image {
        transform: scale(1.05);
      }
    }

    .featured-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
      position: absolute;
      top: 0;
      left: 0;
    }

    .featured-content {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: 30px;
      background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
      z-index: 1;

      .location-tag {
        display: inline-block;
        background-color: @accent-color;
        color: white;
        padding: 5px 12px;
        border-radius: 20px;
        font-size: 0.8rem;
        font-weight: 600;
        margin-bottom: 10px;
      }

      .featured-title {
        color: white;
        font-size: 1.8rem;
        margin-bottom: 10px;
        font-weight: 700;
      }

      .featured-excerpt {
        color: rgba(255,255,255,0.9);
        margin-bottom: 15px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .featured-meta {
        display: flex;
        justify-content: space-between;
        color: rgba(255,255,255,0.8);
        font-size: 0.9rem;

        .author {
          font-weight: 600;
        }
      }
    }
  }

  .featured-side {
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 100%;

    .featured-item {
      position: relative;
      overflow: hidden;
      border-radius: 12px;
      box-shadow: @shadow;
      cursor: pointer;
      transition: @transition;
      flex: 1;
      height: calc(50% - 10px);

      &:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 20px rgba(0,0,0,0.12);

        .side-image {
          transform: scale(1.05);
        }
      }

      .side-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
        position: absolute;
        top: 0;
        left: 0;
      }

      .side-content {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 20px;
        background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
        z-index: 1;

        .location-tag.small {
          display: inline-block;
          background-color: @accent-color;
          color: white;
          padding: 3px 10px;
          border-radius: 20px;
          font-size: 0.7rem;
          font-weight: 600;
          margin-bottom: 8px;
        }

        .side-title {
          color: white;
          font-size: 1.2rem;
          margin-bottom: 8px;
          font-weight: 700;
        }

        .side-meta {
          display: flex;
          justify-content: space-between;
          color: rgba(255,255,255,0.8);
          font-size: 0.8rem;

          .author {
            font-weight: 600;
          }
        }
      }
    }
  }
}

// 主内容区域样式
.main-content {
  grid-area: main;

  .filter-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    flex-wrap: wrap;

    .tags-filter {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;

      .filter-tag {
        padding: 6px 16px;
        background: @light-gray;
        border-radius: 20px;
        font-size: 0.9rem;
        cursor: pointer;
        transition: @transition;

        &:hover {
          background: darken(@light-gray, 5%);
        }

        &.active {
          background: @primary-color;
          color: white;
        }
      }
    }

    .view-sort-container {
      display: flex;
      align-items: center;
      gap: 15px;

      .view-toggle {
        .el-button {
          padding: 8px 16px;
        }
      }
    }
  }

  // 网格视图样式
  .travel-notes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 25px;

    .travel-note-card {
      border-radius: 10px;
      overflow: hidden;
      box-shadow: @shadow;
      transition: @transition;
      background: white;
      cursor: pointer;

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 30px rgba(0,0,0,0.15);

        .card-image {
          transform: scale(1.08);
        }
      }

      .card-image-container {
        height: 180px;
        overflow: hidden;
        position: relative;

        .card-image {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 0.5s ease;
        }

        .location-tag {
          position: absolute;
          top: 15px;
          left: 15px;
          background-color: @accent-color;
          color: white;
          padding: 4px 12px;
          border-radius: 20px;
          font-size: 0.8rem;
          font-weight: 600;
        }
      }

      .card-content {
        padding: 18px;

        .card-title {
          font-size: 1.2rem;
          font-weight: 700;
          margin-bottom: 10px;
          line-height: 1.4;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          height: 2.8em;
        }

        .card-excerpt {
          color: #666;
          font-size: 0.9rem;
          margin-bottom: 15px;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          overflow: hidden;
          height: 4.5em;
        }

        .card-meta {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 0.85rem;

          .author-date {
            display: flex;
            flex-direction: column;

            .author {
              font-weight: 600;
              color: @text-color;
            }

            .date {
              color: #888;
              font-size: 0.8rem;
            }
          }

          .stats {
            display: flex;
            gap: 12px;

            .stat-item {
              display: flex;
              align-items: center;
              color: #888;

              .el-icon {
                margin-right: 5px;
                font-size: 0.9rem;
              }
            }
          }
        }
      }
    }
  }

  // 列表视图样式
  .travel-notes-list {
    display: flex;
    flex-direction: column;
    gap: 25px;

    .travel-note-list-item {
      display: flex;
      background: white;
      border-radius: 10px;
      overflow: hidden;
      box-shadow: @shadow;
      transition: @transition;
      cursor: pointer;

      &:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.12);

        .list-image {
          transform: scale(1.05);
        }
      }

      .list-image-container {
        width: 280px;
        flex-shrink: 0;
        overflow: hidden;

        .list-image {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: transform 0.5s ease;
        }
      }

      .list-content {
        flex: 1;
        padding: 20px;
        display: flex;
        flex-direction: column;

        .list-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 12px;

          .list-title {
            font-size: 1.4rem;
            font-weight: 700;
            flex: 1;
          }

          .location-tag {
            background-color: @accent-color;
            color: white;
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 0.8rem;
            font-weight: 600;
            margin-left: 10px;
          }
        }

        .list-excerpt {
          color: #666;
          margin-bottom: 15px;
          flex: 1;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          overflow: hidden;
          line-height: 1.6;
        }

        .list-meta {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .author-info {
            display: flex;
            align-items: center;
            gap: 15px;

            .author {
              font-weight: 600;
              color: @text-color;
            }

            .date, .location {
              display: flex;
              align-items: center;
              color: #888;
              font-size: 0.9rem;

              .el-icon {
                margin-right: 4px;
              }
            }
          }

          .list-stats {
            display: flex;
            gap: 15px;

            .stats {
              display: flex;
              gap: 12px;

              .stat-item {
                display: flex;
                align-items: center;
                color: #888;

                .el-icon {
                  margin-right: 5px;
                }
              }
            }
          }
        }
      }
    }
  }

  // 加载更多按钮
  .load-more-container {
    display: flex;
    justify-content: center;
    margin: 40px 0;

    .load-more-btn {
      padding: 12px 30px;
      font-size: 1rem;
      background: @light-gray;
      border: none;
      border-radius: 30px;
      transition: @transition;
      color: @text-color;

      &:hover {
        background: darken(@light-gray, 5%);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
      }
    }
  }
}

// 侧边栏样式
.sidebar {
  grid-area: sidebar;

  .sidebar-title {
    font-size: 1.3rem;
    margin-bottom: 20px;
    display: flex;
    align-items: center;

    .subtitle {
      font-size: 0.8rem;
      font-weight: normal;
      color: #888;
      margin-left: 8px;
    }

    &::after {
      content: '';
      flex: 1;
      height: 1px;
      background: @border-color;
      margin-left: 15px;
    }
  }

  .hot-travel-notes {
    margin-bottom: 40px;

    .hot-notes-list {
      display: flex;
      flex-direction: column;
      gap: 15px;

      .hot-note-item {
        display: flex;
        align-items: center;
        background: white;
        border-radius: 8px;
        padding: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        transition: @transition;
        cursor: pointer;

        &:hover {
          transform: translateY(-3px);
          box-shadow: 0 6px 15px rgba(0,0,0,0.1);
        }

        .hot-note-rank {
          width: 28px;
          height: 28px;
          display: flex;
          align-items: center;
          justify-content: center;
          background: @primary-color;
          color: white;
          font-weight: 700;
          border-radius: 50%;
          margin-right: 12px;
          flex-shrink: 0;
        }

        .hot-note-content {
          flex: 1;
          min-width: 0;

          .hot-note-title {
            font-size: 1rem;
            margin-bottom: 8px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .hot-note-meta {
            display: flex;
            justify-content: space-between;
            font-size: 0.8rem;
            align-items: center;

            .hot-note-author {
              color: #666;
              font-weight: 600;
            }

            .hot-note-stats {
              display: flex;
              gap: 10px;

              .hot-stat {
                display: flex;
                align-items: center;
                color: #888;

                .el-icon {
                  margin-right: 3px;
                  font-size: 0.8rem;
                }
              }
            }
          }
        }

        .hot-note-image {
          width: 60px;
          height: 60px;
          border-radius: 6px;
          overflow: hidden;
          margin-left: 12px;
          flex-shrink: 0;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }
    }
  }

  .travel-inspiration {
    .inspiration-card {
      border-radius: 10px;
      overflow: hidden;
      box-shadow: @shadow;
      background: white;

      .inspiration-image {
        width: 100%;
        height: 180px;
        object-fit: cover;
      }

      .inspiration-content {
        padding: 20px;

        .inspiration-title {
          font-size: 1.1rem;
          font-weight: 700;
          margin-bottom: 10px;
        }

        .inspiration-text {
          color: #666;
          font-size: 0.9rem;
          margin-bottom: 15px;
          line-height: 1.6;
        }

        .inspiration-btn {
          width: 100%;
          justify-content: center;

          .el-icon {
            margin-right: 5px;
          }
        }
      }
    }
  }
}

// 文章详情模态窗口
.article-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.75);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;

  .article-modal {
    background: white;
    border-radius: 12px;
    width: 90%;
    max-width: 1000px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
  }
}

// 响应式样式
@media (max-width: 992px) {
  .travel-notes-container {
    grid-template-columns: 1fr;
    grid-template-areas:
      "hero"
      "featured"
      "main"
      "sidebar";
    padding: 0 15px;
  }

  .featured-section .featured-grid {
    grid-template-columns: 1fr;
    height: auto;

    .featured-main {
      height: 350px;
    }

    .featured-side {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

      .featured-item {
        height: 200px;
      }
    }
  }

  .travel-notes-list .travel-note-list-item {
    flex-direction: column;

    .list-image-container {
      width: 100%;
      height: 200px;
    }
  }

  .main-content .filter-container {
    flex-direction: column;
    align-items: flex-start;

    .tags-filter {
      margin-bottom: 15px;
      width: 100%;
      overflow-x: auto;
      padding-bottom: 10px;
      flex-wrap: nowrap;

      &::-webkit-scrollbar {
        height: 4px;
      }

      &::-webkit-scrollbar-thumb {
        background: #ddd;
        border-radius: 4px;
      }
    }

    .view-sort-container {
      width: 100%;
      justify-content: space-between;
    }
  }
}

@media (max-width: 768px) {
  .hero-section {
    height: 400px;

    .hero-title {
      font-size: 2.5rem;
    }
  }

  .travel-notes-grid {
    grid-template-columns: 1fr;
  }

  .main-content .travel-note-list-item .list-meta {
    flex-direction: column;
    align-items: flex-start;

    .author-info {
      margin-bottom: 10px;
    }
  }
}

.section-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #333;
  margin: 0;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #FF7D00;
  display: inline-block;
}
</style>
